<clr-modal [(clrModalOpen)]="opened" [clrModalSize]="'lg'">
    <h3 class="modal-title">{{'APP_MSG_DETAIL'|translate}}</h3>
    <div class="modal-body">
        <div *ngIf="item">
            <h5>{{'APP_BASIC_INFORMATION'|translate}}</h5>
            <hr>
            <div *ngIf="item.message.title === 'CLUSTER_EVENT_WARNING'">
                <p>{{'APP_CLUSTER'|translate}}: {{item.clusterName}} </p>
                <p>{{'APP_EVENT_HOST'|translate}}: {{item.msgContent['host']}} </p>
                <p>{{'APP_EVENT_NAME'|translate}}: {{item.msgContent['name']}} </p>
                <p>{{'APP_EVENT_TYPE'|translate}}: {{item.msgContent['type']}} </p>
                <p>{{'APP_EVENT_COMPONENT'|translate}}: {{item.msgContent['component']}} </p>
                <p>{{'APP_EVENT_DETAIL'|translate}}: {{item.msgContent['message']}} </p>
                <p>{{'APP_EVENT_KIND'|translate}}: {{item.msgContent['kind']}} </p>
                <p>{{'APP_NAMESPACE'|translate}}: {{item.msgContent['namespace']}} </p>
                <p>{{'APP_EVENT_REASON'|translate}}: {{item.msgContent['reason']}} </p>
                <p>{{'APP_EVENT_DATE'|translate}}: {{item.createdAt|date:'yyyy-MM-dd HH:mm:ss'}}</p>
            </div>
            <div *ngIf="item.message.title !== 'CLUSTER_EVENT_WARNING'">
                <p>{{'APP_CLUSTER'|translate}}: {{item.clusterName}} </p>
                <p>{{'APP_EVENT_DETAIL'|translate}}: {{item.msgContent['message']}}</p>
                <p *ngIf="item.message.level==='Warning'">{{'APP_EVENT_DETAIL'|translate}}
                    : {{item.msgContent['errorMsg']}}</p>
                <p>{{'APP_EVENT_DATE'|translate}}: {{item.createdAt|date:'yyyy-MM-dd HH:mm:ss'}}</p>
            </div>
            <hr>
        </div>
        <app-modal-alert></app-modal-alert>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn" (click)="onCancel()">{{'APP_CANCEL'|translate}}</button>
    </div>
</clr-modal>
